<template>
  <el-dialog
    top="30px"
    width="700px"
    title="受理详情"
    append-to-body
    :close-on-click-modal="false"
    :visible.sync="visible"
    :before-close="beforeClose"
  >
    <el-form
      :model="editData"
      v-loading="loading"
      label-position="left"
      size="small"
      :rules="rules"
      ref="approvalform"
      label-width="150px"
      class="project-form"
    >
      <el-form-item label="申请人">
        {{ editData.enterprise_name }}
      </el-form-item>
      <el-form-item label="营业执照">
        {{ editData.enterprise_code }}
      </el-form-item>
      <el-form-item label="联系电话">
        {{ editData.agent_phone }}
      </el-form-item>
      <el-form-item label="申请时间">
        {{ editData.create_time }}
      </el-form-item>
      <el-form-item label="担保金额">{{ editData.tender_bond }} 元</el-form-item>
      <el-form-item label="开标时间">
        {{ openTime }}
      </el-form-item>
      <el-form-item label="产品选择" prop="project_type_id">
        <select-product
          placeholder="请选择担保产品"
          class="form-control-ml"
          clearable
          v-model="editData.project_type_id"
          @change="setLoanMode"
        ></select-product>
      </el-form-item>
      <el-form-item label="投标有效期">
        {{ tenderMonths }} 个月 ({{ editData.tender_expire }} 天)
      </el-form-item>
      <el-form-item label="担保费率">{{ editData.gua_rate }} ‰</el-form-item>
      <el-form-item label="担保费">{{ editData.gua_fee }} 元</el-form-item>
      <el-form-item label="附件">
        <attach-main :related-id="queryId"></attach-main>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="saveLoading" class="btn-long" @click="submitForm">
          受理
        </el-button>
        <el-button type="danger" :loading="saveLoading" class="btn-long" @click="handleRefuse">
          拒绝
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import SelectProduct from '@/bigcredit/views/letter/apply/accept/SelectProduct'
import AttachMain from '@/bigcredit/views/letter/apply/accept/AttachMain'

export default {
  components: {
    SelectProduct,
    AttachMain,
  },
  props: {
    visible: Boolean,
    queryId: String,
  },
  data() {
    return {
      loading: false,
      saveLoading: false,
      tableName: 'guarantee_project',
      editData: {},
      rules: {
        project_type_id: { required: true, message: '请选择担保产品', trigger: 'change' },
      },
    }
  },
  computed: {
    ...mapGetters(['user']),
    tenderMonths() {
      return Math.round(this.editData.tender_expire / 30)
    },
    openTime() {
      const date = this.editData.open_time || ''
      return `${date.substring(0, 4)}-${date.substring(4, 6)}-${date.substring(
        6,
        8
      )} ${date.substring(8, 10)}:${date.substring(10, 12)}`
    },
  },
  watch: {
    queryId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    setLoanMode(_, select) {
      this.editData.project_type_name = select.load_name || ''
      this.editData.tender_expire = select.expire_days * 30 || 0
      this.editData.gua_rate = select.gua_rate
      const guaFee = Math.round((this.editData.tender_bond * select.gua_rate) / 10) / 100 || 0
      this.editData.gua_fee = guaFee > +(select.min_gua_fee || '') ? guaFee : select.min_gua_fee
    },
    submitForm() {
      this.$refs.approvalform.validate(valid => {
        if (valid) {
          this.$api
            .updateData(this.$serviceName, this.tableName, this.queryId, {
              project_type_id: this.editData.project_type_id,
              project_type_name: this.editData.project_type_name,
              tender_expire: this.editData.tender_expire,
              gua_rate: this.editData.gua_rate,
              gua_fee: this.editData.gua_fee,
              claim_status: 1,
              claim_time: this.$utils.dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
              claim_person: this.user.realName,
            })
            .then(() => {
              this.beforeClose()
              this.$emit('success', true)
              this.$message.success('受理成功')
            })
            .catch(err => {
              if (err) {
                const errStr =
                  typeof err.data?.error_description === 'string'
                    ? err.data?.error_description
                    : '操作失败，请重试！'
                return this.$message.error(`${errStr}`)
              }
            })
            .finally(() => {
              this.saveLoading = false
            })
        } else {
          this.$message.error('请选择担保产品')
        }
      })
    },
    handleRefuse() {
      if (!this.queryId) {
        return
      }
      this.$prompt('请输入拒绝理由', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValidator: value => (!value ? '请输入不通过原因' : true),
      })
        .then(({ value }) => {
          this.saveLoading = true
          this.$api
            .updateData(this.$serviceName, this.tableName, this.queryId, {
              claim_status: 2,
              claim_time: this.$utils.dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
              claim_person: this.user.realName,
              confuse_reason: value,
            })
            .then(() => {
              this.beforeClose()
              this.$emit('success', true)
              this.$message.success('已拒绝')
            })
            .catch(err => {
              this.$message.error(err?.data?.error_description || '拒绝失败')
            })
            .finally(() => {
              this.saveLoading = false
            })
        })
        .catch(() => {})
    },
    getData() {
      if (!this.queryId) {
        return
      }
      this.loading = true
      this.$api
        .getDataFromId(this.$serviceName, this.tableName, this.queryId)
        .then(res => {
          this.editData = res?.data ?? {}
        })
        .finally(() => {
          this.loading = false
        })
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style lang="scss" scoped></style>
